<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 智慧农业信息管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
        }
        
        .navbar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand, .navbar-nav .nav-link {
            color: white !important;
        }
        
        .sidebar {
            position: fixed;
            top: 56px;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 20px 0;
            background: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .sidebar .nav-link {
            color: #333;
            padding: 12px 20px;
            border-left: 3px solid transparent;
            transition: all 0.3s;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: #667eea;
            background-color: #f8f9fa;
            border-left-color: #667eea;
        }
        
        .sidebar .nav-link i {
            width: 20px;
            margin-right: 10px;
        }
        
        main {
            margin-top: 56px;
            padding-top: 20px;
        }
        
        .chart-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 1.3rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .chart-title i {
            margin-right: 10px;
            color: #667eea;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/index">
                <i class="fas fa-leaf"></i> 智慧农业信息管理系统
            </a>
            <div class="navbar-nav ms-auto">
                <span class="navbar-text text-white me-3">
                    <i class="fas fa-user-circle"></i>
                    欢迎，<span th:text="${currentUser.realName}">用户</span>
                </span>
                <a class="nav-link text-white" href="/logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-md-block sidebar">
                <div class="position-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/index">
                                <i class="fas fa-home"></i> 首页
                            </a>
                        </li>
                        
                        <!-- 管理员菜单 -->
                        <div th:if="${currentUser.role == 'admin'}">
                            <li class="nav-item">
                                <a class="nav-link" href="/user/list">
                                    <i class="fas fa-users"></i> 用户管理
                                </a>
                            </li>
                        </div>
                        
                        <!-- 农场主和管理员菜单 -->
                        <div th:if="${currentUser.role == 'admin' || currentUser.role == 'manager'}">
                            <li class="nav-item">
                                <a class="nav-link" href="/field/list">
                                    <i class="fas fa-map"></i> 地块管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/crop/list">
                                    <i class="fas fa-seedling"></i> 作物管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/material/list">
                                    <i class="fas fa-boxes"></i> 农资管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/plan/list">
                                    <i class="fas fa-calendar-alt"></i> 种植计划
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/farming/list">
                                    <i class="fas fa-tractor"></i> 农事记录
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/monitor/list">
                                    <i class="fas fa-chart-line"></i> 生长监测
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/product/list">
                                    <i class="fas fa-box"></i> 产品管理
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/sales/list">
                                    <i class="fas fa-shopping-cart"></i> 销售记录
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="/statistics/dashboard">
                                    <i class="fas fa-chart-bar"></i> 数据统计
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/news/list">
                                    <i class="fas fa-bullhorn"></i> 新闻公告
                                </a>
                            </li>
                        </div>
                        
                        <!-- 所有用户可见 -->
                        <li class="nav-item">
                            <a class="nav-link" href="/farm/display">
                                <i class="fas fa-store"></i> 农场展示
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3">
                    <h1 class="h2">📊 数据统计分析</h1>
                </div>

                <!-- 图表区域 -->
                <div class="row">
                    <!-- 生产成本分析 -->
                    <div class="col-md-6">
                        <div class="chart-card">
                            <div class="chart-title">
                                <i class="fas fa-coins"></i> 生产成本分析
                            </div>
                            <div id="costChart" style="height: 400px;"></div>
                        </div>
                    </div>

                    <!-- 销售额趋势 -->
                    <div class="col-md-6">
                        <div class="chart-card">
                            <div class="chart-title">
                                <i class="fas fa-chart-line"></i> 销售额趋势
                            </div>
                            <div id="salesChart" style="height: 400px;"></div>
                        </div>
                    </div>

                    <!-- 作物产量对比 -->
                    <div class="col-md-6">
                        <div class="chart-card">
                            <div class="chart-title">
                                <i class="fas fa-seedling"></i> 作物产量对比
                            </div>
                            <div id="yieldChart" style="height: 400px;"></div>
                        </div>
                    </div>

                    <!-- 产品销量分布 -->
                    <div class="col-md-6">
                        <div class="chart-card">
                            <div class="chart-title">
                                <i class="fas fa-pie-chart"></i> 产品销量分布
                            </div>
                            <div id="volumeChart" style="height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        // 获取后端传递的数据
        const costData = /*[[${costByType}]]*/ {};
        const salesData = /*[[${salesByMonth}]]*/ {};
        const yieldData = /*[[${yieldByCrop}]]*/ {};
        const volumeData = /*[[${volumeByProduct}]]*/ {};

        // 生产成本柱状图
        const costChart = echarts.init(document.getElementById('costChart'));
        const costOption = {
            title: {
                text: '各类农事成本统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: Object.keys(costData),
                axisLabel: {
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                name: '成本（元）'
            },
            series: [{
                name: '成本',
                type: 'bar',
                data: Object.values(costData),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#667eea' },
                        { offset: 1, color: '#764ba2' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        costChart.setOption(costOption);

        // 销售额趋势折线图
        const salesChart = echarts.init(document.getElementById('salesChart'));
        const salesOption = {
            title: {
                text: '月度销售额趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: Object.keys(salesData).sort(),
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                name: '销售额（元）'
            },
            series: [{
                name: '销售额',
                type: 'line',
                data: Object.keys(salesData).sort().map(key => salesData[key]),
                smooth: true,
                itemStyle: {
                    color: '#667eea'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(102, 126, 234, 0.5)' },
                        { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        salesChart.setOption(salesOption);

        // 作物产量柱状图
        const yieldChart = echarts.init(document.getElementById('yieldChart'));
        const yieldOption = {
            title: {
                text: '各类作物产量对比',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: Object.keys(yieldData)
            },
            yAxis: {
                type: 'value',
                name: '产量'
            },
            series: [{
                name: '产量',
                type: 'bar',
                data: Object.values(yieldData),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#f093fb' },
                        { offset: 1, color: '#f5576c' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        yieldChart.setOption(yieldOption);

        // 产品销量饼图
        const volumeChart = echarts.init(document.getElementById('volumeChart'));
        const volumeOption = {
            title: {
                text: '产品销量占比',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle'
            },
            series: [{
                name: '销量',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {d}%'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                data: Object.keys(volumeData).map(key => ({
                    name: key,
                    value: volumeData[key]
                }))
            }]
        };
        volumeChart.setOption(volumeOption);

        // 响应式调整
        window.addEventListener('resize', function() {
            costChart.resize();
            salesChart.resize();
            yieldChart.resize();
            volumeChart.resize();
        });
        /*]]>*/
    </script>
</body>
</html>

